<template>
  <fieldset>
    <legend>商品</legend>
    <h1>商品:Product</h1>
    <ul>
      <li v-for="item in productData" :key="item.id">
        <b> 产品名称:{{ item.title }} </b>
        --------
        <b> 价格: {{ item.price }} </b>
        --------
        <b> 库存:{{ item.inventory }} </b>
        <button :disabled="item.inventory === 0" @click="addCart(item)">
          +加入购物车
        </button>
      </li>
    </ul>
  </fieldset>
</template>
<script>
//需求:

//1.请求服务器,在product组件里面渲染数据

// - 封装请求的方法

// - 请求放到vuex的action里面

// - vuex需要模块化,并且添加mutation

//2.点击产品后面的按钮,需要将产品添加到购物车

//3.相同的数据添加到购物车之后,需要让购物车的数量加1 产品的库存-1

//4.总价计算
import { mapActions, mapState } from "vuex";
//引入axios
import axios from "axios";
export default {
  methods: {
    addCart(current) {
      //current 点击按钮选中的这条数据
      console.log(current);
      this.ADD_CART(current);
    },
    ...mapActions("product", ["FETCH_PRODUCT"]),
    ...mapActions("cart", ["ADD_CART"]),
  },
  computed: {
    ...mapState("product", ["productData"]),
  },
  mounted() {
    this.FETCH_PRODUCT();
  },
  created() {
    //发送一个get请求
    axios
      .get("/api/data/index.json", {
        //get请求的配置
        //请求头
        headers: {},
        //传递的参数
        params: {
          name: "lilei",
        },
      })
      .then((res) => {
        console.log(res);
      });

    //发送一个post请求

    //语法:axios.post('地址',{传递的参数},{请求的配置})

    // axios.post("/api/users/login", {
    //     //传递的数据
    //     username: "lbw",
    //     password: "555"
    // }, {
    //     //配置
    //     headers: {
    //         nickname: "jntm"
    //     }
    // })
    //     .then(res => {
    //         console.log(res)
    //     })

    //配置模式config

    // axios({
    //     url:"/api/users/login",//请求地址
    //     method: "post",//请求方式
    //     //params:{},//get请求的传参字段
    //     data: {
    //         username: 'admin',
    //         password: 'admin'
    //     },//post请求的传参字段
    //     //headers: {},//设置请求头
    //     timeout: 3000,//超时设置,请求3秒没有响应,直接进入catch
    //     withCredentials: true //携带凭据(cookie)
    // })
    // .then(res=>{
    //     console.log(res)
    // })
  },
};
</script>